<template>
	<view class="'container  ' + (mode_ === 'night' ? 'night' : '')">
		<view class="content_image">
			<!-- <image :src="" mode="aspectFill"  @click="changImg"></image> -->
			<image src="../../static/my/1.png"></image>
		</view>
		<!-- 内容 -->
		<view class="content_botton">
			<view class="content_info" v-if="userInfo.avatarUrl">
				<avatar :avatarUrl="userInfo.avatarUrl"></avatar>
				<view class="username">{{ userInfo.nickName }}</view>
			</view>
			<view v-else class="noLogin"  >
				<image src="../../static/my/user.png" mode="widthFix" @tap="onGetUserInfo"></image>
				<view class="">用户请进行登录</view>
			</view>
			
			<!--  -->
			<view class="my_order">
				<view class="my_order_title">
					我的学习数据/夜间模式
				</view>
				<view class="my_order_item" >
					<view class="my_order_content">
						<image src="../../static/my/s1.png" mode="widthFix"></image>
						<view class="">今日已学习</view>
						<view class="">20词</view>
					</view>
					<view class="my_order_content">
						<image src="../../static/my/s2.png" mode="widthFix"></image>
						<view class="">今日待复习</view>
						<view class="">60词</view>
					</view>
					<view class="my_order_content">
						<image src="../../static/my/s3.png" mode="widthFix"></image>
						<view class="">今日学习时长</view>
						<view class="">15分钟</view>
					</view>
					<view class="my_order_content" @tap="setMode_">
						<image src="../../static/my/s4.png" mode="widthFix"></image>
						<text v-if="mode_ === 'day'">夜间模式</text>
						<text v-else>白天模式</text>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="other">
				<view class="other_addres" @tap="toConfig">
					<view >设置</view>
					<image src="../../static/my/r.png" mode="widthFix"></image>
				</view>
				<view class="other_our" @tap="toAbtUs">
					<view>关于我们</view>
					<image src="../../static/my/r.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import avatar from '@/component/avatar/index';
	import {
		createStoreBindings
	} from '@/static/miniprogram_npm/mobx-miniprogram-bindings';
	import {
		store
	} from '../../store/store';
	
	export default {
		components: {
			avatar,
		},
		data() {
			return {
				userInfo: {
					avatarUrl: '',
					nickName: ''
				},
				mode_: '',
				undefined: ''
			};
		},
		onLoad() {
			this.storeBindings = createStoreBindings(this, {
				store,
				field: ['userInfo', 'mode'],
				actions: ['setUserInfo', 'setMode', 'getMode']
			}); 
	
			this.setData({
				mode_: this.getMode()
			}); // console.log(this.data.mode_)
	

		},
		onShow() {},
		onReady() {},
		onUnload() {
			this.storeBindings.destroyStoreBindings();
		},
		methods: {

			onGetUserInfo() {
				uni.getUserProfile({
					desc: '获取您的头像',
					success: (res) => {
						this.setData({
							userInfo: res.userInfo
						});
						console.log(this.userInfo.avatarUrl);
						this.setUserInfo(res.userInfo);
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			toAbtUs() {
				uni.navigateTo({
					url: '../../pages-myinfo/pages/aboutAs/index'
				});
			},
			 toConfig() {
			 	uni.navigateTo({
			 		url: '../../pages-myinfo/pages/config/index'
			 	});
			 },
			setMode_() {
				const nextMode = this.mode_ === 'day' ? 'night' : 'day';
				this.setMode(nextMode);
				this.setData({
					mode_: nextMode
				});
			}
		}
	}
</script>

<style lang="scss">

	page{
		background-color:#eee;
	}
   .content_image{
	   image{
		   // 高斯模糊
		   filter: blur(3rpx);
		   width: 100%;
	   }
	   height: 200rpx;
	   position: relative;
   }
   .content_botton{
	   .noLogin{
		   position: absolute;
		   left: 45%;
		    transform: translate(-50%);
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    justify-content: space-around;
		    // margin-top: 5%;
		    margin-left: 5%;
		    border-radius: 20rpx;
		    width: 90%;
		    height: 350rpx;
		    background-color:#fff;
		   justify-content: center;
		   align-items: center;
		   position: relative;
		   image{
			   width: 130rpx;
			   height: 130rpx;
		   }
	   }
	   .content_info{
		  position: relative;
		    z-index: 999;
		   display: flex;
		   flex-direction: column;
		   align-items: center;
		   justify-content: space-around;
		   // margin-top: 15%;
		   margin-left: 5%;
		   border-radius: 20rpx;
		   width: 90%;
		   height: 350rpx;
		   background-color:#fff;
		   image{
			   margin-top: -40rpx;
			   width: 130rpx;
			   height: 130rpx;
			   border-radius: 50%;
		   }
		   .username{
			   
		   }
		   .select{
			   display: flex;
			   justify-content: space-between;
			   view{
				   padding: 0 40rpx;
			   }
		   }
	   }
	   .my_order{
		   width: 90%;
		   margin-top: 10rpx;
		   margin-left: 5%;
		   height: 280rpx;
		   border-radius: 20rpx;
		   background-color: #fff;
		   .my_order_title{
			   border-radius: 20rpx;
			   padding-left: 20rpx;
			   line-height: 80rpx;
			   height: 80rpx;
		   }
		   .my_order_item{
			   width:90%;
			   padding: 4.5%;
		       float: left;
			   display: flex;
			   align-items: center;
			   flex-direction: row;
			   justify-content: space-around;
			  .my_order_content{
				  display: flex;
				  flex-direction: column;
				  align-items: center;
				  // justify-content: space-around;\
				  justify-content: space-between;
				  font-size: 0.55rem;
				  image{
				  		width: 70rpx;
				  		height: 50rpx;
				  }
			  }
		   }
	   }
   }
   .other{
	  margin: 10rpx 40rpx;
	   height: 190rpx;
	   width: 90%;
	   border-radius: 20rpx;
	   background-color: #fff;
	   .other_addres{
		   height: 60rpx;
		   padding: 20rpx 20rpx;
		   border-bottom: 1rpx dashed gainsboro;
		   display: flex;
		   justify-content: space-between;
		   image{
			   width: 50rpx;
		   }
	   }
	   .other_our{
		   height: 60rpx;
		   padding: 20rpx 20rpx;
		   display: flex;
		   justify-content: space-between;
		   image{
		   		width: 50rpx;
		   }
	   }
   }
   
</style>
